<template>
  <div class="Home">
    <div class="my_user" @click="gren">
      <div><van-image radius="5px" width="2.5rem" height="2.5rem" :src="my_images" /></div>
      <div class="my_user_title">{{ my_name }}</div>
    </div>

    <van-cell-group title="" class="xia">
      <van-cell title="我的收藏" is-link url="" border icon="shop-o " />
      <van-cell title="朋友圈" is-link to="" icon="comment-o" />
      <van-cell title="相册" is-link to="" icon="photo-o" />
      <van-cell title="表情" is-link to="" icon="smile-o" />
    </van-cell-group>
    <van-cell-group title="" class="xia">
      <van-cell title="设置" is-link to="setUp" icon="setting-o" />
    </van-cell-group>
  </div>
</template>

<script>
import { Cell, CellGroup } from 'vant'
import { Icon } from 'vant'
import axios from 'axios'
export default {
  name: 'Home',
  data() {
    return {
      // 头像路径
      my_images: '',
      // 用户姓名
      my_name: localStorage.getItem('username')
    }
  },
  methods: {
    // 查看个人信息
    gren() {
      this.$router.push('personal')
    }
  },
  // 单页背景色
  beforeRouteEnter(to, from, next) {
    document.querySelector('body').setAttribute('style', 'background-color:rgb(216, 216, 216)')
    next()
  },
  beforeRouteLeave(to, from, next) {
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  mounted() {
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/index',
      data: {
        id: localStorage.getItem('id')
      }
    }).then((res) => {
      this.my_images = res.data.img
    })
  },
  created() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my_user {
  font-size: 0.5rem;
  padding: 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
}
.my_user_title {
  margin-left: 0.5rem;
}
.xia {
  margin-top: 0.5rem;
}
</style>
